<template>
  <div id="category">
      <!-- 标题 -->
      <div class="title">
          <van-nav-bar
                  title="商品分类"
          />
      </div>
    <div class="listWrapper" v-if="showLoading">
      <!--左边-->
      <div class="leftWrapper">
        <ul class="wrapper">
          <li
              class="categoryItem"
              v-for="(cate,index) in categories"
              :class="{selected:currentIndex===index}"
              @click="clickLeft(index)"
              :key="cate.id"
              ref="menuList"
          >
            <span class="textWrapper">{{ cate.name }}</span>
          </li>
        </ul>
      </div>
      <!--右边-->
      <ContentView :categoriesDetail="categoriesDetail"/>
    </div>
    <van-loading
        v-else
        type="spinner"
        color="#75a342"
        style="position: absolute;left: 50%;top:40%;transform: translateX(-50%)"
    >正在拼命加载中···！
    </van-loading>
  </div>
</template>

<script>
// 1. 引入组件
import ContentView from "./components/contentView/ContentView";
import {getCateGroy,getCateGroyGoods} from "@/api/api";
export default {
  name: "cateGory",
  created() {
      getCateGroy().then((response) => {
              this.categories=response.data.data.cateList;
          });
      getCateGroyGoods(1).then((response) => {
          this.categoriesDetail=response.data.data.categoryList;
      });
    // this.initData();
  },

  data() {
    return {
      // 是否显示正在加载
      showLoading: true,
      // 左侧列表数组
      categories: [],
      // 右侧列表数组
      categoriesDetail: [],
      // 左侧item选中与否
      currentIndex: 0
    }
  },

  components: {
    ContentView
  },
  methods: {
      // onClickLeft()
      // {
      //     this.$router.push({path:'/dashboard/home'})
      // },
    async clickLeft(index) {
      // 2.1 改变索引
      this.currentIndex = index;
        getCateGroyGoods(index+1).then((response) => {
            this.categoriesDetail=response.data.data.categoryList;
        });
    }

  },




}
</script>

<style lang="less" scoped>

#category {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  overflow: hidden;
}

.listWrapper {
  display: flex;
  position: absolute;
  top: 2.75rem;
  bottom: 3rem;
  width: 100%;
  overflow: hidden;
}

.leftWrapper {
  background-color:white;
  width: 5.3125rem;
  flex: 0 0 5.3125rem;
}

.categoryItem {
  padding: 0.75rem 0;
  border-bottom: solid 1px #E8E9E8;
  position: relative;
}

.categoryItem .textWrapper {
  line-height: 1.25rem;
  border-left: solid 0.1875rem transparent;
  padding: 0.3125rem 0.6875rem;
  font-size: 0.8125rem;
  color: #666666;
}

.categoryItem.selected {
  background: #FFF;
}

.categoryItem.selected .textWrapper {
  border-left-color: #3cb963;
  font-weight: bold;
  font-size: 0.875rem;
  color: #333333;
}

@media (min-width: 960px) {
  .wrapper {
    border-right: 1px solid #E8E9E8;
  }

  .wrapper .categoryItem {
    background: #fff;
  }
}
</style>
